$(function(){
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['2017-02 出库量', '2017-03 出库量'],
            right:'4%',bottom:'0px'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            containLabel: true,
        },
        yAxis:  {
            type: 'value'
        },
        xAxis: {
            type: 'category',axisLabel:{margin:10,textStyle:{
                fontSize:15
            }},
            data: ['汉口仓','汉阳仓','武昌仓']
        },
        series: [
            {
                name: '2017-02 出库量',
                type: 'bar',
                stack: '总量',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#62c8ef',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [31486, 62594, 93702]
            },
            {
                name: '2017-03 出库量',
                type: 'bar',
                stack: '总量',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#fba663',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [40235, 49085, 47195]
            }
        ]
    };
    myChart.setOption(option);

    var myChart02 = echarts.init(document.getElementById('main02'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['2017-02 出库量', '2017-03 出库量'],
            right:'4%',bottom:'0px'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            containLabel: true
        },
        yAxis:  {
            type: 'value'
        },
        xAxis: {
            type: 'category',axisLabel:{margin:10,textStyle:{
                fontSize:15
            }},
            data: ['汉口仓','汉阳仓','武昌仓']
        },
        series: [
            {
                name: '2017-02 出库量',
                type: 'bar',
                stack: '总量',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#62c8ef',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [30405, 30435, 60435]
            },
            {
                name: '2017-03 出库量',
                type: 'bar',
                stack: '总量',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#fba663',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [40235, 49085, 47195]
            }
        ]
    };
    myChart02.setOption(option);

    var myChart03 = echarts.init(document.getElementById('main03'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',boundaryGap: false,  
            boundaryGap: false,
            data: ['3月1日','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'仓库出库量趋势图',
                type:'line',
                stack: '总量',
                itemStyle : {    
                    normal : {    
                        lineStyle:{    
                            color:'#4fa1a4' ,width:2
                        }
                    }    
                },    
                data:[60, 40, 80, 35, 55, 90, 45,90,75,45,55,78,60,100,60, 40, 80, 35, 55, 90, 45,90,75,45,55,78,60,35, 55, 90, 45]
            }
        ]
    };
    myChart03.setOption(option);

    var myChart04 = echarts.init(document.getElementById('main04'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['阿莫西林1','阿莫西林2','阿莫西林3'],
             right:'4%',bottom:'0px',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',axisLabel:{margin:10,textStyle:{
                    fontSize:15
                }},
                data: ['武汉仓','成都仓','沈阳仓']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '出库量（件）',
               
            }
        ],
        series: [
            {
                name:'阿莫西林1',
                type:'bar',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#ff7202',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                barGap:0,
                data:[600, 450, 550]
            },
            {
                name:'阿莫西林2',
                type:'bar',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#00aaeb',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data:[700, 550, 450]
            },
            {
                name:'阿莫西林3',
                type:'bar',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#fdd000',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data:[800, 350, 350]
            }
        ]
    };
    myChart04.setOption(option);


    


    $('.table').on('click','.table_more',function(){
        var c=$(this).parent().find('canvas');
        if(c.length==0){
            chart($(this))
        }
    })
    function chart(el){

        setTimeout(function(){
            var els=el.parent().find('.div_u1');
            console.log(els)
            console.log(els.eq(0).width())
            var myChart05 = echarts.init(els.get(0));
            option1 = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                yAxis:  {
                    type: 'value'
                },
                xAxis: {
                    type: 'category',axisLabel:{margin:10,textStyle:{
                        fontSize:15
                    }},
                    data: ['武汉仓','郑州仓','成都仓','沈阳仓']
                },
                series: [
                    {
                        name: '出库总数',
                        type: 'bar',
                        stack: '总量',
                        barWidth:50,
                        itemStyle:{
                            normal:{
                                color:'#62c8ef',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: [1000, 1800, 2000, 900]
                    }
                ]
            };
            

            var myChart06 = echarts.init(els.get(1));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                legend: {
                    data:['当前库存数','出库量','安全库存','最小库存','最大库存'],show:false
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2017-03-01','03-02','03-03','03-04','03-05','03-06','03-07','03-08','03-09','03-10']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                    },
                    {
                        type: 'value',
                        axisLabel: {
                             formatter: ''
                        }
                    }
                ],
                series: [
                    {
                        name:'当前库存数',
                        type:'bar',
                        barWidth:50,
                        itemStyle:{
                            normal:{
                                color:'#62c8ef',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data:[1500, 2000, 3000, 1000, 1500, 1300, 1500, 1800, 1300, 1500]
                    },
                    {
                        name:'出库量',
                        type:'line',
                        yAxisIndex: 1,
                        itemStyle : {    
                            normal : {    
                                lineStyle:{    
                                    color:'#fdd000' ,width:2
                                }
                            }    
                        },
                        data:[1000, 500, 1000, 800, 700, 800, 900, 200, 800, 1000]
                    },
                    {
                        name:'安全库存',
                        type:'line',
                        yAxisIndex: 1,
                        itemStyle : {    
                            normal : {    
                                lineStyle:{    
                                    color:'#f08300' ,width:2
                                }
                            }    
                        },
                        data:[1000, 1500, 1300, 1000, 900, 1300, 1000, 1300, 1100, 1000]
                    },
                    {
                        name:'最小库存',
                        type:'line',
                        yAxisIndex: 1,
                        itemStyle : {    
                            normal : {    
                                lineStyle:{    
                                    color:'#45b035' ,width:2
                                }
                            }    
                        },
                        data:[1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000]
                    },
                    {
                        name:'最大库存',
                        type:'line',
                        yAxisIndex: 1,
                        itemStyle : {    
                            normal : {    
                                lineStyle:{    
                                    color:'#0068b7' ,width:2
                                }
                            }    
                        },
                        data:[2750, 2750, 2750, 2750, 2750, 2750, 2750, 2750, 2750, 2750]
                    }
                ]
            };
            myChart05.setOption(option1);
            myChart06.setOption(option);
        },500)
        
    }

    var myChart07 = echarts.init(document.getElementById('main05'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        // legend: {
        //     data: ['2017-02 出库量', '2017-03 出库量']
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            containLabel: true
        },
        yAxis:  {
            type: 'value',
            name: '出库量（万）',
                min: 0,

        },
        xAxis: {
            type: 'category',
            axisLabel:{
                margin:10,
                interval : 'auto',
                formatter : function(params){
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 5;
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                },
                textStyle:{
                    fontSize:12
                }
            },
            data: ['中国医药集团总公司','广州医药集团有限公司','哈药集团有限公司','太极集团有限公司','汇仁集团有限公司','吉林修正药业集团','太极集团有限公司','重庆医药股份有限公司','深圳市制药厂','云南医药工业股份有限公司']
        },
        series: [
            {
                name: '三方货主出库量排行',
                type: 'bar',
                stack: '总量',
                barWidth:50,
                itemStyle:{
                    normal:{
                        color:'#62c8ef',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [6.2, 5.2, 5.0, 4.8, 4.6, 2.2, 2.0, 1.8, 1.6, 1.6]
            }
        ]
    };
    myChart07.setOption(option);
})